<template>
  <div class="center">
    <!-- type-select -->
    <div class="container-md type-bar">
      <ul class="nav nav-pills nav-fill">
        <li
          v-for="(tab, tIdx) in tabs"
          :key="tIdx"
          class="nav-item"
          style="cursor: pointer;"
          @click="setData(tab.key, tIdx)"
        >
          <a :class="['nav-link', { active: tIdx === currentIdx }]" aria-current="page">{{ tab.title }}</a>
        </li>
      </ul>
    </div>

    <!-- type-content -->
    <div v-if="tabData" class="container-md content">
      <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-12">
        <div v-for="(item, idx) in tabData" :key="idx" class="col mb-20" style="cursor: pointer;">
          <div class="card text-center h-100" @click="jumpTo(item.url)">
            <div class="card-img">
              <img :src="item.icon" class="card-img-top">
            </div>
            <div class="card-body">
              <h5 class="card-title">{{ item.title }}</h5>
              <p v-if="item.desc" class="card-text">{{ item.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { TOOLTYPES, TOOLLINKS } from '@/assets/const'
export default {
  name: 'CENTER',
  data () {
    return {
      tabs: TOOLTYPES,
      tabDatas: TOOLLINKS,
      tabData: null,
      currentIdx: 0
    }
  },
  created () {
    this.setData('online', 0)
  },
  methods: {
    setData (key, idx) {
      this.tabData = this.tabDatas[key]
      this.currentIdx = idx
    },
    jumpTo (url) {
      url && window.open(url, '_blank')
    }
  }
}
</script>
<style lang="less" scoped>
.center {
  min-width: 360px;
  width: 100%;
  flex: 1;
  .type-bar {
    margin: 12px auto;
    text-align: center;
  }

  .mb-20 {
    margin-bottom: 20px;
  }
  .card-img {
    padding: 10px;
    box-shadow: inset 0 0 1px #bbb;
    > img {
      border-radius: 8px;
    }
  }
  .card:hover {
    .card-title {
      color: #0d6efd;
    }
  }
}
</style>
<style lang="less">
*::-webkit-scrollbar {
  display: none!important;
  width: 0px;
  height: 0px;
}
</style>
